<template>
  <div class="goods-menu" @click="funaaa()">
    <img  class="header" src="goodstypetop.jpg" alt="">
    <div class="header" @click="funtz(v.images)" v-for="(v,i) in this.$store.state.tidem.datac.goods" :key="i">
      <img class="oImg" :src="v.images[0].img_path">
      <div class="he-style">
        <h3>{{v.goods_name|h3}}</h3>
        <p>规格</p>
        <p  class="style-jg">{{v.brand}}</p>
        <p class="style-kc"><span>{{v.sold_num}}</span><span>加购</span></p>
      </div>
    </div>
      
  </div>
</template>

<script>
export default {
  filters:{
    h3(val){
      if(val.length>6){
        return val.substr(0,6)+"..."
      }
      return val
    }
  },
  data() {
    return {
      arr:{}
    }
  },
  created(){
    let url = `http://81.68.226.70:8050/goods/休闲零食/`
    this.$store.dispatch("goodsmenuc",{url})
  },
  methods: {
    funtz(goods_id){
      this.$router.push({path:"/tidedetail",query:{goods_id}})
      // console.log()
    },
    funaaa(){
 console.log(this.$store.state.tidem.dataa)
    }
  },

}
</script>

<style scoped>
.header{
  width: 2.75rem;
  height: 0.9rem;
  display: flex;
  justify-content: space-between;
}
.goods-menu>*{
  margin-bottom: 0.1rem;
  /* background-color: aqua; */
}
.oImg{
  height: 100%;
  width: 1rem;
  border: 1px solid #000000;
  margin-right: 0.08rem;
  border-radius: 0.1rem;
}
.he-style{
  flex: 1;
}
.he-style>h3{
  line-height: 0.35rem;
}
p{
  font-size: 0.12rem;
  color: #757575;
}
.style-jg{
  color: #f00;
  font-size: 0.13rem;
}
.style-kc{
  display: flex;
  justify-content: space-between;
  padding-right: 0.1rem;
}
</style>